<template>
    <div>
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item>
                <!-- <h3 text="2xl" justify="center">{{ index + 1 }}</h3> -->
                <img src="./img/1.jpg" style="height: 200px; width: 700px;"/>
            </el-carousel-item>
            <el-carousel-item>
                <!-- <h3 text="2xl" justify="center">{{ index + 1 }}</h3> -->
                <img src="./img/2.jpg" style="height: 200px; width: 700px;"/>
            </el-carousel-item>
            <el-carousel-item>
                <!-- <h3 text="2xl" justify="center">{{ index + 1 }}</h3> -->
                <img src="./img/3.jpg" style="height: 200px; width: 700px;"/>
            </el-carousel-item>
            <el-carousel-item>
                <!-- <h3 text="2xl" justify="center">{{ index + 1 }}</h3> -->
                <img src="./img/4.jpg" style="height: 200px; width: 700px;"/>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="demo-collapse">
        <el-collapse accordion>
            <el-collapse-item name="1">
                <template #title>
                    文件上传操作（系统使用提醒）<el-icon class="header-icon">
                        <info-filled />
                    </el-icon>
                </template>
                <div>
                    在使用文件上传功能的时候，请使用符合格式要求的文件类型，表格中的头行需要符合系统规定才能成功导入；
                    在文件上传页面中，下方是多级选择切换，只有点击分栏才会显示文件上传的接口；
                    文件的大小请不要超过500M；
                    请规范上传行为，不要多次重复上传，不恶意刷系统数据；
                    
                </div>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template #title>
                    历史课题查看操作（系统使用提醒）<el-icon class="header-icon">
                        <info-filled />
                    </el-icon>
                </template>
                <div>
                    在查看历史页面，只能查看过去发布过，且以及被选报完成的课题；
                    课题仅供查看，不能进行修改和新增操作；
                </div>
                
            </el-collapse-item>
            <el-collapse-item title="数据中心（系统使用提醒）" name="3">
                <div>
                    数据中心的统计范围包括有本学院全部在本学期进行实践的学生;
                    在数据中心可以看到所有统计范围内学生的最高分、最低分以及平均分，还可以看到及格比例以及优良中差比例；
                </div>
            </el-collapse-item>
            <el-collapse-item title="密码修改温馨提示" name="4">
                
                <div>
                    修改密码请严格按照规范进行，不恶意刷脏数据；
                    请符合密码书写规范，使用合理字符；
                    请不要随意泄露自己的账号密码。
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { InfoFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'




</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>